<!-- // Copyright (c) [Year] [name of copyright holder]
// [Software Name] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2. 
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2 
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.  
// See the Mulan PSL v2 for more details.   -->
<!DOCTYPE HTML>
<html app="reres">

<head>
    <meta charset="UTF-8">
    <title>ResRes Options</title>
    <link rel="icon" href="icon.png" mce_href="icon.png" type=”image/x-icon”>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/options.css" />
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/options.js"></script>
</head>

<body>
    <div id="app">
        <div class="navbar navbar-inverse navbar-fixed-top top">
            <div class="container">
                <div class="btnBox">
                    <span class="h2"><a title="view in the github" href="https://github.com/hanan198501/ReRes" target="_blank">ReRes</a></span>
                    <small> &nbsp;&nbsp;&nbsp;&nbsp;Change the response of the request.</small>
                    <button class="btn btn-primary fr" @click="export()">导出</button>
                    <div class="file fr"><button class="btn btn-primary">导入</button><input type="file" id="jsonFile" /></div>
                    <button class="btn btn-primary fr" @click="addRule()"> + </button>
                </div>
            </div>
        </div>
        <div class="container">
            <div :style="display:editDisplay;" class="editBox">
                <button type="button" class="close" aria-hidden="true" @click="hideEditBox()">&times;</button>
                <div class="errorMsg">{{inputError}}</div>
                <div class="form-group">
                    <label for="req">If URL match:</label>
                    <input type="text" class="form-control" id="req" v-model="curRule.req" />
                </div>
                <div class="form-group">
                    <label for="res">Response:</label>
                    <input type="text" class="form-control" id="res" v-model="curRule.res" />
                </div>
                <div class="form-group">
                    <label for="res">Group:</label>
                    <input type="text" class="form-control" id="res" v-model="curRule.group" />
                </div>
                <!--        <div class="form-group">
            <label for="type">Type:</label>
            <select v-model="curRule.type" class="form-control" id="type">
                <option value="file">URL映射</option>
                <option value="dir">目录映射</option>
            </select>
        </div>-->
                <button class="btn-block btn btn-primary" @click="saveRule()">保存</button>
            </div>
            <table>
                <tboby>
                    <tr v-for='(group, rulesMap) in rules' :key='idx'>
                        <td>
                            <table class="table table-hover table-bordered">
                                <thead>
                                    <td>Group</td>
                                    <td>Enable</td>
                                    <td>If URL match</td>
                                    <td>Response</td>
                                    <!--<td>Type</td>-->
                                    <td>Operating</td>
                                </thead>
                                <tbody>
                                    <tr v-for='rule,idx in group' :key='idx'>
                                        <td v-if="$index === 0" rowspan="{{rulesMap.length}}" style="width: 140px;vertical-align: middle;border-right: 1px solid #ddd;background: #fff;">{{group || group === unidefined || '未命名'}}</td>
                                        <td><input type="checkbox" v-model="rule.checked" /></td>
                                        <td>
                                            <div title="{{rule.req}}">{{rule.req}}</div>
                                        </td>
                                        <td>
                                            <div title="{{rule.res}}">{{rule.res}}</div>
                                        </td>
                                        <!--<td>{{rule.type == "file" ? "URL映射" : "目录映射"}}</td>-->
                                        <td>
                                            <button @click="(eve,rule)=>{edit(rule)}" type="button" class="btn btn-primary btn-xs edit">编辑</button>
                                            <button @click="(eve,rule)=>{removeUrl(rule)}" type="button" class="btn btn-default btn-xs remove">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tboby>
            </table>
        </div>
    </div>
</body>

</html>